<template>
  <div id="takeback">
    <div  style="display:flex;align-items: center;">
          <img class="top_img" src="@/assets/images/a8.png" style="width:35px;height:35px;margin-right:10px;"/>
          <div style="line-height: 40px;font-weight:bold;">设置明细</div>
    </div>
    <el-form ref="form" :model="form" label-width="70px">

      <div style="display:flex;">
          <div style="flex:1;display:flex;align-items: center;">
             <div style="width:50px;text-align-last: justify;margin-top:-12px;font-size: 14px;color: #606266;margin-right:10px;">查询项</div>


            <el-form-item label="订单日期" >
              <el-date-picker  type="date"   placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="form.data" style="width:140px;">
              </el-date-picker>
             </el-form-item>

            <el-form-item label="蜂巢类别" style="margin-left:10px;">
              <el-select  v-model="form.select_type" placeholder="请选择类别" style="width:140px;" >
                <el-option  v-for="(item,index) in type_list" :key="item.maid" :label="item.title" :value="item.maid"></el-option>
              </el-select>
            </el-form-item>

            <div class="buttoon_box">
                <div class="buttoon_box_item cursor-po"  style="margin-left:10px;background:#FFC600;color:white;" @click="search_but1()">确 定</div>
                <div class="buttoon_box_item cursor-po" style="margin-left:10px;border:1px solid #D9D9D9;" @click="refresh_but()">清 空</div>
            </div>
         </div>
         <!-- <div>
              <el-button class="custom_color_button" type="primary" @click="but1()">类别设置</el-button>
         </div> -->
      </div>



   </el-form>
   <!-- 渲染数据list -->
   <set-details-list :datalist="datalist"  @up_list_fun="list_fun"> </set-details-list>


   <div style="margin-top:20px;text-align: center;">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="10"
        layout="prev, pager, next, jumper"
        :total="count">
      </el-pagination>
    </div>








  </div>
</template>

<script>
import SetDetailsList from '@/view/Manor/setDetailsList'
export default {
  name: 'SetDetails',
  data () {
    return {
        datalist:[],
        page:1,
        count:0,
        form:{
          data:'',
          select_type:'',
        },
      type_list:[],
    }
  },
 components:{
   SetDetailsList
  },
  created(){
     this.team_fun()
  },
  mounted (){

  },
  methods: {
    team_fun(){
      this.post("win_price/manorOption", {}).then(res => {
        this.type_list = res.result
        this.form.select_type = this.type_list[0].maid
        this.list_fun()
      })
    },
     list_fun(){
        this.post("win_price/daySettingList", {
            page:this.page,
            maid:this.form.select_type,
            startday:this.form.data,
        }).then(res => {
          if(res.error_code === 1) return this.$message.warning({ message: res.message, center: true})
          const { count, list } = res.result
          this.count = count
          this.datalist = list
          this.$message.success({ message: '更新成功', center: true})
       })
    },

    search_but1(){
      this.page = 1
      this.list_fun()
    },
    search_but2(){
      this.page = 1
      this.list_fun()
    },
    refresh_but(){
      this.page = 1
      this.form={
        telphone:'',
        select_num:'',
      },
      this.list_fun()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page = val
      this.list_fun()
      console.log(`当前页: ${val}`);
    }
  }
}
</script>


<style scoped>
.cursor-po{
  cursor: pointer;
}
.buttoon_box{
  display:flex;margin-bottom:10px;
}
.buttoon_box_item{
  height:40px;line-height:40px;width:60px;font-size:14px;text-align:center;border-radius:5px;
}
.el-input-box>>>input{
  padding: 0px 3px !important;
}
</style>
